<template>
	<view class="content">
		<input type="text" style="border: solid 1px black;" :cursor="inputCode.length" :focus="inputFocus"
			v-model="inputCode">
		<button @click="btnGetCodeInfo">搜索</button>
		<text v-if="!showResult" style="font-size: 18px;">按下侧边按钮对准二维码进行扫码或直接输入条码</text>
		<view v-else v-for="(v,k) in products"
			style="background-color: beige;display: flex;flex-direction: column;padding: 20px;margin: 20px;width: 70vw;">
			<view class="" style="display: flex;flex-direction: row;padding-top: 10px;">
				<text style="font-size: 18px;">商品名称:</text>
				<text style="font-size: 18px;">{{v.attrs.productName}}</text>
			</view>
			<view class="" style="display: flex;flex-direction: row;padding-top: 10px;">
				<text style="font-size: 18px;">商品编码:</text>
				<text style="font-size: 18px;">{{v.attrs.productCode}}</text>
			</view>
			<view class="" style="display: flex;flex-direction: row;padding-top: 10px;">
				<text style="font-size: 18px;">区域号:</text>
				<text style="font-size: 18px;">{{v.attrs.areaCode}}</text>
			</view>
			<view class="" style="display: flex;flex-direction: row;padding-top: 10px;">
				<text style="font-size: 18px;">货架号:</text>
				<text style="font-size: 18px;">{{v.attrs.shelfCode}}</text>
			</view>
			<view class="" style="display: flex;flex-direction: row;padding-top: 10px;">
				<text style="font-size: 18px;">层数:</text>
				<text style="font-size: 18px;">{{v.attrs.layer}}</text>
			</view>
			<view class="" style="display: flex;flex-direction: row;padding-top: 10px;">
				<text style="font-size: 18px;">货位号:</text>
				<text style="font-size: 18px;">{{v.attrs.locationCode}}</text>
			</view>
		</view>

	</view>

</template>


<script>
	import {
		initScan,
		startScan,
		stopScan
	} from '@/scanModule'
	export default {
		data() {
			return {
				inputFocus: false,
				inputCode: '',
				showResult: false,
				products: [],
				productName: '',
				productCode: "",
				shelfCode: "",
				layer: "",
				locationCode: ""
			}
		},
		onLoad() {
			let that = this
			initScan();
			startScan();
			uni.$on("SCAN_CODE", ({
				code
			}) => {
				console.log(code);
				that.getCodeInfo(code)
				// code就是扫码的结果 接下来写业务需求

			});
		},
		destroyed() {
			stopScan()
		},
		methods: {
			btnGetCodeInfo() {
				if (!this.inputCode) {
					uni.showModal({
						title: "提示",
						content: "商品码为空"
					})
					return false
				}
				this.getCodeInfo(this.inputCode)
			},
			getCodeInfo(code) {
				uni.showLoading({
					title: "加载中..."
				})
				let that = this
				uni.request({
					url: `http://47.95.170.149:8890/searchCode`,
					data: {
						barCode: code
					},
					method: "GET",
					success({
						data: res
					}) {
						uni.hideLoading()
						console.log(res);
						if (res.code == 0) {
							that.products = res.data
							that.showResult = true
						} else {
							that.showResult = false
							that.products = {}
							uni.showModal({
								title: "提示",
								content: "未找到此货物位置"
							})
						}
					},
					fail(err) {
						console.log(err);
						uni.showToast({
							title: err
						})
					},
					complete() {
						that.inputCode = code
						// setTimeout(() => {

						// 	that.inputFocus = true
						// }, 100)
					}
				})
			}
		}
	}
</script>

<style>
	.content {
		background-color: #8f8f94;
		padding-top: 45px;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
</style>